<template>
  <a-drawer
    :title="model.demandType==1?'普通陪护':'产房陪护'"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%;overflow: auto;padding-bottom: 53px;">

    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <template v-if='model.demandType==1'>
          <div style='text-align: center;font-size: 25px;'>普通陪护</div>
          <div style='font-weight: bold;font-size: 20px;margin-left: 20px'>基本信息</div>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name" label="姓名">
            <a-input placeholder="姓名"  v-model="model.name" />
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name" label="手机号">
            <a-input placeholder="手机号"  v-model="model.phoneNum" />
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name" label="家庭地址">
            <a-input placeholder="家庭地址"  v-model="model.familyAddr" />
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name" label="小区名称">
            <a-input placeholder="小区名称"  v-model="model.regVillage" />
          </a-form-model-item>
          <a-divider  />
          <div style='font-weight: bold;font-size: 20px;margin-left: 20px'>妇产信息</div>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="age" label="年龄">
            <a-input-number  v-model="model.age"/>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="whichPregnant" label="第几胎">
            <a-tag color="blue" >第{{model.whichPregnant}}胎</a-tag>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fetusNums" label="单双胎">
            <a-tag color="blue" v-if='model.fetusNums==1'>单胎</a-tag>
            <a-tag color="orange" v-if='model.fetusNums==2'>双胎</a-tag>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="expectedDate" label="预产期">
            <a-date-picker  v-model="model.expectedDate"/>
          </a-form-model-item>

          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="regTime" label="上户时间">
            <a-date-picker  valueFormat='YYYY-MM-DD' v-model="model.regTime" />
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="regDay" label="上户天数">
            <a-input-number   v-model="model.regDay"/>
          </a-form-model-item>
          <!-- <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="regDay" label="需求金额">
            <a-input-number   v-model="model.demandAmount"/>
          </a-form-model-item> -->
          <a-divider  />
          <div style='font-weight: bold;font-size: 20px;margin-left: 20px'>月嫂要求</div>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="nannyGrade" label="月嫂等级">
            <a-checkbox-group :options="options" :value="model.nannyGrade.split(',')" />

          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="essenntialSkill" label="必会技能">
            <a-tag color='blue' v-for='(item,index) in model.essenntialSkill.split("、")'>
              {{item}}
            </a-tag>

          </a-form-model-item>

          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="elseSkill" label="其它技能">
            <a-input placeholder="请输入其它技能" v-model="model.elseSkill" />
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="regionAreaName" label="地域要求">
            <a-input v-model="model.regionAreaName"/>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ageBegin" label="年龄要求">
            <a-input-number v-model="model.ageBegin"/>-<a-input-number v-model="model.ageEnd"/>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="expDate" label="订单过期时间">
            <a-date-picker valueFormat='YYYY-MM-DD' v-model="model.expDate" />
          </a-form-model-item>

        </template>
        <template v-else>
          <div style='text-align: center;font-size: 25px;'>普通陪护</div>
          <div style='font-weight: bold;font-size: 20px;margin-left: 20px'>基本信息</div>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name" label="姓名">
            <a-input placeholder="姓名"  v-model="model.name" />
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name" label="手机号">
            <a-input placeholder="手机号"  v-model="model.phoneNum" />
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fetusNums" label="医院地址">
            <a-input placeholder="请输入医院地址" v-model="model.hospitalAddr" />
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name" label="生产医院">
            <a-input placeholder="生产医院"  v-model="model.hospitalName" />
          </a-form-model-item>

          <a-divider />
          <div style='font-weight: bold;font-size: 20px;margin-left: 20px'>产妇信息</div>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="age" label="年龄">
            <a-input-number  v-model="model.age"/>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="whichPregnant" label="第几胎">
            <a-tag color="blue" >第{{model.whichPregnant}}胎</a-tag>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fetusNums" label="单双胎">
            <a-tag color="blue" v-if='model.fetusNums==1'>单胎</a-tag>
            <a-tag color="orange" v-if='model.fetusNums==2'>双胎</a-tag>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="expectedDate" label="预产期">
            <a-date-picker  v-model="model.expectedDate"/>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name" label="陪护方式">
            <a-select  v-model="model.companionType" >
			 <a-select-option  :value="0">医院产后陪护</a-select-option>
              <a-select-option :value="1">医院+居家  7天护理套餐</a-select-option>
              <a-select-option :value="2">医院+居家  14天护理套餐</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name" label="陪护套餐">
            <a-select  v-model="model.compainionPackage" >
              <a-select-option :value="index+1" v-for="(item,index) in levelList[model.companionType].list" :key="index">{{item.title}}-{{item.birthNum}}-{{item.money}}</a-select-option>
            </a-select>
          </a-form-model-item>


        </template>
      </a-form-model>
    </a-spin>
  </a-drawer>
</template>

<script>
  import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'
  import { httpAction } from '@/api/manage'
  import moment from "moment"


  export default {
    name: "WechatDemandRecordModal",
    data () {
      return {
        title:"操作",
        visible: false,
        modalWidth:800,
        drawerWidth:700,
        modaltoggleFlag:true,
        confirmDirty: false,
        model: {},
		levelList: [{
			action: '注意：医院产后陪护时间从产后到出院，护理员不跟随上门到家护理，在医院护理不计算天数，为更好为您提供护理服务，请进产房前通知护理员。',
			list: [{
				name: '医院产后陪护',
				money: 1680,
				title: '顺产',
				birthNum: '单胎'
			}, {
				name: '医院产后陪护',
				money: 3980,
				title: '剖产',
				birthNum: '单胎'
			}, {
				name: '医院产后陪护',
				money: 2680,
				title: '顺产',
				birthNum: '双胎'
			}, {
				name: '医院产后陪护',
				money: 5680,
				title: '剖产',
				birthNum: '双胎'
			}]
		}, {
			action: '注意：居家期间护理员做月子餐，双胎宝宝护理比较难，如护理员忙不过来，请家人给予适当协助。',
			list: [{
				name: '医院+居家  7天护理套餐',
				money: 3980,
				title: '顺产',
				birthNum: '单胎'
			}, {
				name: '医院+居家  7天护理套餐',
				money: 4980,
				title: '剖产',
				birthNum: '单胎'
			}, {
				name: '医院+居家  7天护理套餐',
				money: 5980,
				title: '顺产',
				birthNum: '双胎'
			}, {
				name: '医院+居家  7天护理套餐',
				money: 6980,
				title: '剖产',
				birthNum: '双胎'
			}]
		}, {
			action: '注意：居家期间护理员做月子餐，双胎宝宝护理比较难，如护理员忙不过来，请家人给予适当协助。',
			list: [{
				name: '医院+居家  14天护理套餐',
				money: 7680,
				title: '顺产',
				birthNum: '单胎'
			}, {
				name: '医院+居家  14天护理套餐',
				money: 8680,
				title: '剖产',
				birthNum: '单胎'
			}, {
				name: '医院+居家  14天护理套餐',
				money: 9680,
				title: '顺产',
				birthNum: '双胎'
			}, {
				name: '医院+居家  14天护理套餐',
				money: 11680,
				title: '剖产',
				birthNum: '双胎'
			}]
		}],
		levelIndex: 0,
		showLevel: false,
		placeholder: '',
		form: {
			companionType: 0,
			demandAmount: '',
			fetusNums: '1',
			demandType: 2,
			companionName: '',
			compainionPackage: -1,
			expDate: '',
			whichPregnant: 1
		},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        validatorRules:{
        },
        url: {
          add: "/wechat/wechatDemandRecord/add",
          edit: "/wechat/wechatDemandRecord/edit",
        },
        dictCode: "nannyLevel",
        dictOptions: [],
        options: [
          { label: '高级', value: '1' },
          { label: '金牌', value: '2' },
          { label: '钻石', value: '3' },
          { label: '明星', value: '4' },
          { label: '首席', value: '5' }
        ]
      }
    },
    created () {
        this.dictOptions = getDictItemsFromCache(this.dictCode);
        console.log(this.dictOptions)
    },
    methods: {
      add () {
        //初始化默认值
        this.edit({});
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.$refs.form.clearValidate();
      },
      handleOk () {
        const that = this;
        // 触发表单验证
         this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }else{
             return false;
          }
        })
      },
      handleCancel () {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>

</style>